<template>  
  <div class="app">  
    <!-- 顶部导航栏 -->  
    <div class="top-bar">  
      <div class="time">2022.11.14 星期三 12:22:31</div>  
      <div class="user-info">  
        <span>地点名称</span>  
        <span>晴 14℃</span>  
        <span>管理员</span>  
        <button class="logout-btn">退出</button>  
      </div>  
    </div>  

    <!-- 页面主要区域 -->  
    <div class="main-content">  
      <!-- 左侧面板 -->  
      <div class="left-panel">  
        <div class="panel">  
          <Dashboard />  
        </div>  
        <div class="panel">  
          <Waterquality />  
        </div>  
        <div class="panel">  
          <Equipmentstatus />  
        </div>  
      </div>  

      <!-- 中央图表区域 -->  
      <div class="center-panel">  
        <div class="center-title">  
          <div class="tile" id = "tile1">  
            <div class="text">  
              <div class="value">9,289,218</div>  
            </div>  
          </div>  
          <div class="tile" id = "tile2">  
            <div class="text">  
              <div class="value">9,289,218</div>  
            </div>  
          </div>  
          <div class="tile" id = "tile3">  
            <div class="text">  
              <div class="value">90%</div>  
            </div>  
          </div>  
        </div>  
        <div class="center-content"></div>  
        <!-- 底部导航 -->  
        <div class="bottom-bar">  
          <BottomBar/>
          
        </div>  
      </div>  

      <!-- 右侧面板 -->  
      <div class="right-panel">  
        <div class="panel">  
          <Inspectiontask />  
        </div>  
        <div class="panel">  
          <Maintenancetasks />  
        </div>  
        <div class="panel">  
          <Repairworkorder />  
        </div>  
      </div>  
    </div>  

    
  </div>  
</template>

<script>  
import Dashboard from "./components/Dashboard.vue";  
import Waterquality from "./components/Waterquality.vue"; 
import Equipmentstatus from "./components/Equipmentstatus.vue"; 
import Inspectiontask from "./components/Inspectiontask.vue"; 
import Maintenancetasks from "./components/Maintenancetasks.vue"; 
import Repairworkorder from "./components/Repairworkorder.vue"; 

import BottomBar from "./components/BottomBar.vue"; 
export default {  
  components: {  
    Dashboard,
    Waterquality,
    Equipmentstatus,
    Inspectiontask,
    Maintenancetasks,
    Repairworkorder,
    BottomBar
  }  ,
  name: "WastewaterMonitoring",  
};  
</script>  

<style scoped>  
/* 全局布局 */  
.app {  
  display: flex;  
  flex-direction: column;  
  height: 100vh;  
  background: #001f3f; /* 页面背景 */  
  color: #fff; /* 字体颜色 */  
  font-family: Arial, sans-serif;  
}  

#tile1 {
  background-image: url("../assets/images/images/index_01_07.png"); /* 替换为你的图标路径 */  
  background-size: cover; /* 使背景图片覆盖整个区域 */ 
  
}
#tile2 {
  background-image: url("../assets/images/images/index_01_09.png"); /* 替换为你的图标路径 */  
  background-size: cover; /* 使背景图片覆盖整个区域 */ 

}
#tile3 {
  background-image: url("../assets/images/images/index_01_11.png"); /* 替换为你的图标路径 */  
  background-size: cover; /* 使背景图片覆盖整个区域 */ 

}

/* 顶部导航栏 */  
.top-bar {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  background: #002244;  
  height: 60px;  
  padding: 0 20px;  

  /* 添加背景图片 */  
  background-image: url("../assets/images/images/til.png");  /* 替换为你的图片路径 */  
  background-size: cover; /* 背景图像覆盖整个区域 */  
  background-position: center; /* 背景图像居中显示 */  
  background-repeat: no-repeat; /* 防止背景图像重复 */  
}   

.top-bar .user-info span {  
  margin: 0 10px;  
}  

.top-bar .logout-btn {  
  background: transparent;  
  border: 1px solid #fff;  
  color: #fff;  
  cursor: pointer;  
  padding: 5px 10px;  
  border-radius: 4px;  
}  

/* 中央标题区域 */  
.center-title {  
  display: flex;  
  justify-content: space-around;  
  margin-bottom: 20px;  
}  

.tile {  
  font-size: 16px;  
  text-align: center;  
  background: rgba(255, 255, 255, 0.2);  
  padding: 10px 20px;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  width: 150px;  
  height: 40px;  
  
  border-radius: 10px;  
  position: relative;  
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.7), inset 0 0 10px rgba(0, 255, 255, 0.3);  
  border: 1px solid rgba(0, 255, 255, 0.5);  
  overflow: hidden;  
}  

/* 图标样式 */  
.tile .icon {  
  width: 50px;  
  height: 50px;  
  background-size: contain;  
  background-repeat: no-repeat;  
  margin-right: 15px;  
}  

/* 文本样式 */  
.tile .text {  
  text-align: left;  
}  



.tile .value {  
  margin-top: 15px;
  font-size: 12px;  
  font-weight: bold;  
  color: #fff;  
}  


/* 页面主要内容 */  
.main-content {  
  display: flex;  
  flex: 1;  
  overflow: hidden;  
}  

.left-panel,  
.right-panel {  
  width: 25%;  
  padding: 10px;  
  background-color: rgba(0, 37, 65, 0.8); /* 半透明 */  
  overflow-y: auto;  
}  

.center-panel {  
  flex: 1;  
  padding: 20px;  
  display: flex;  
  flex-direction: column;  
}  

.panel {  
  margin-bottom: 15px;  
  padding: 15px;  
  background: #003366;  
  border-radius: 5px;  
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);  
}  

.panel h3 {  
  margin: 0 0 10px;  
  font-size: 16px;  
  text-align: center;  
}  

.center-title {  
  display: flex;  
  justify-content: space-around;  
  margin-bottom: 20px;  
}  

.center-content {  
  flex: 1;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  background-image: url("../assets/images/images/img.jpg");  
  background-size: contain; /* 调整为 contain，使图片宽高自适应且保持比例 */  
  background-repeat: no-repeat; /* 确保图片不重复 */  
  background-position: center; /* 将背景图居中显示 */  
  border-radius: 10px;  
  border: 1px dashed #fff;  
}  



/* 底部导航 */  
.bottom-bar {  
  display: flex;  
  justify-content: space-around;  
  background: #002244;  
  padding: 10px 0;  
}  

.menu-item {  
  font-size: 14px;  
  cursor: pointer;  
  padding: 5px 10px;  
  border-radius: 3px;  
}  

.menu-item:hover {  
  background: #004488;  
}  
</style>